<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>18_案例练习-onfocus-onblur</title>
        <style>
            input {
                outline: none;
            }
        </style>
    </head>
    <body>
        <input type="text" value="不要在上课用电脑登陆微信">

        <script>
            var inp = document.querySelector('input');

            inp.onfocus = function(){
                this.style.color = 'yellow';
                this.style.backgroundColor = 'red';
            }

            inp.onblur = function(){
                var rColor = Math.floor(Math.random() * 256);
                var gColor = Math.floor(Math.random() * 256);
                var bColor = Math.floor(Math.random() * 256);

                // this.style.color = 'rgb(100,50,80)';
                this.style.color = 'rgb(' + rColor + ',' + gColor + ',' + bColor + ')';

                var rBgColor = Math.floor(Math.random() * 256);
                var gBgColor = Math.floor(Math.random() * 256);
                var bBgColor = Math.floor(Math.random() * 256);

                this.style.backgroundColor = 'rgb(' + rBgColor + ',' + gBgColor + ',' + bBgColor + ')';


            }
        </script>
    </body>
</html>